// ------------------获取学生数据，并渲染表格-------------------

async function renderStudent() {
    const {data:res} = await axios.get('/students')

    let arr = res.data.map(item => {
        return `<tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender === 0? '男' : '女'}</td>
        <td>${item.group}</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province}${item.city}${item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3"><i data-id = "${item.id}" class="bi bi-pen"></i></a>
          <a href="javascript:;" class="text-danger"><i data-id = "${item.id}" class="bi bi-trash"></i></a>
        </td>
      </tr>`
    })
    document.querySelector('tbody').innerHTML =arr.join('')
}
renderStudent()

// 添加操作，需要提前准备，模态框的用法，省市县联动效果

// bootstrap模态框使用方法：1.实例化 2.调用方法显示隐藏
// let addModal = new bootstrap.Modal(模态框盒子)
let addModal = new bootstrap.Modal(document.querySelector('#modal'))

// addModal.show() //模态框显示
// addModal.hide() //模态框隐藏

document.querySelector('#openModal').addEventListener('click',function(){
     // 修改模态框的标题
     document.querySelector('#modal h5').innerHTML = '添加学员'
    //  重置表单
     document.querySelector('#form').reset()
    addModal.show() 
})

// 省市县的联动效果

async function initCity(){
   let province = document.querySelector('[name=province]')
   let city = document.querySelector('[name=city]')
   let area = document.querySelector('[name=area]')
    //1.获取全部的省，渲染到第一个下拉框的位置
    const {data:res} = await axios.get('/api/province')
   let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
   province.innerHTML = '<option value="">--省份--</option>' + arr.join('')
    // 2.切换省的时候，获取对应的市，渲染到第二给下拉框的位置
    province.addEventListener('change',async function(){
        // 无论选择的哪个省，一定要重置县
        area.innerHTML = `<option value="">--城区--</option>` 
        let pname = province.value
        if(pname === ''){
            return (city.innerHTML = '<option value="">--城市--</option>')
        }
        const {data:res} = await axios.get('/api/city',{params:{pname}})
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        city.innerHTML = '<option value="">--城市--</option>' + arr.join('')
    })
    // 3.切换市的时候，获取对应的县，渲染到第三给下拉框的位置
    city.addEventListener('change',async function(){
        let pname = province.value
        let cname = city.value
        if(cname === ''){
            return (area.innerHTML = `<option value="">--城区--</option>`)
        }
        const {data:res} = await axios.get('/api/area',{params:{pname,cname}})
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`)
        area.innerHTML = `<option value="">--城区--</option>` + arr.join('')
    })
}
initCity()

// 点击弹窗中的确认按钮的时候
document.querySelector('#submit').addEventListener('click', async  function(e){
    e.preventDefault()
    let data = val(document.querySelector('#form'))
    // 把数字类型的值转换一下
    data.age = Number(data.age)
    data.gender = +data.gender
    data.group = +data.group
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary

    // 判断,是添加还是修改 操作
    let title = document.querySelector('.modal-title').innerHTML
    if(title === '添加学员'){
        // ajax提交
        try {
            const{data:res} = await axios.post('/students',data)
            message.success(res.message)//使用插件提示
            // alert(res.message)
            renderStudent()//重新获取页面数据,重新渲染
            addModal.hide()//关闭弹窗
            } catch(e){
                message.error('添加失败')
            }
    }else if (title === '修改学员'){
        try {
            let id = document.querySelector('.modal-title').dataset.id
            const{data:res} = await axios.put(`/students/${id}`,data)
            message.success(res.message)//使用插件提示
            // alert(res.message)
            renderStudent()//重新获取页面数据,重新渲染
            addModal.hide()//关闭弹窗
            } catch(e){
                message.error('添加失败')
            }
    }
    
})


// ----------------删除操作 | 编辑操作--------------
document.querySelector('tbody').addEventListener('click',async function(e){
    if (e.target.classList.contains('bi-trash')) {
        // console.log('你点的是删除');
        let id = e.target.dataset.id
        
        // 目前阶段,我们应该有这样的思想:对于敏感词,必须加提示
        // 至于用什么提示(原生的confirm,插件),无所谓
        if(!confirm('确定要删除吗?')) return
        // console.log(id);
     try {
       const { data:res } =  await axios.delete(`/students/${id}`)
        message.success('删除成功')//使用插件提示
        renderStudent()//重新获取页面数据,重新渲染
        } catch (e) {
            message.error('删除失败')
        }
    }
    if (e.target.classList.contains('bi-pen')) {
        let id = e.target.dataset.id
        // console.log('你点的是编辑',id);

        // 修改模态框的标题
        document.querySelector('#modal h5').innerHTML = '修改学员'
        document.querySelector('#modal h5').setAttribute('data-id',id)

        addModal.show()
        // 要做数据回填 --> 首先得有数据 --> 根据id发送请求获取数据
        const {data:res} = await axios.get(`/students/${id}`)
        // 在数据回填之前,应该把市,县都取出,渲染到第2,3个下拉框
        let p1 = axios.get('/api/city',{params:{pname:res.data.province}})
        let p2 = axios.get('/api/area',{params:{pname:res.data.province ,cname: res.data.city}})
        // const [{data:{data:c}},{data:{data:a}}] = await Promise.all([p1,p2])
        // console.log(c);
        // console.log(a);
        const result = await Promise.all([p1,p2])
        // console.log(result[0].data.tdata);
       let arr2 = result[0].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=city]').innerHTML = '<option value="">--城市--</option>' + arr2.join('')
        // console.log(result[1].data.tdata);
        let arr3 = result[1].data.data.map(item => `<option value="${item}">${item}</option>`)
        document.querySelector('[name=area]').innerHTML = '<option value="">--地区--</option>' + arr3.join('')

        // val(表单,数据) 传递两个参数,表示进行数据回填
        val(document.querySelector('#form'),res.data)

    }
})